<template>
	<view>
		<image class="bg"
			src='https://renovationcdn.jiachuangnet.com/addMaterial/bg.png'>
		</image>
		<view class="content">
			<view style="display: flex; justify-content: center;">
				<u-image
					src="https://renovationcdn.jiachuangnet.com/allNewLogo.png"
					width="150rpx" height="150rpx" radius="10"></u-image>
			</view>
			<view style="text-align: center;margin:70rpx 0;font-size: 36rpx;font-weight: 700;">
				您好,创建您的账号! 
			</view>
			<view class="item">
				<view class="text">账号</view>
				<view class="input">
					<u-input type="text" placeholder="请输入您的账号" v-model="account"></u-input>
				</view>
			</view>
			<view class="item">
				<view class="text">密码</view>
				<view class="input">
					<u-input type="password" placeholder="请输入您的密码" v-model="pwd"></u-input>
				</view>
			</view>
			<view class="item">
				<view class="text">确认密码</view>
				<view class="input">
					<u-input type="password" placeholder="请输入您的密码" v-model="verifyPwd"></u-input>
				</view>
			</view>
			<view class="item">
				<view class="text">手机</view>
				<view class="input" style="display: flex;">
					<view style="width: 60%;">
						<u-input type="text" placeholder="请输入您的手机号码" v-model="mobile" ></u-input>
					</view>
					<view style="width: 40%;position: relative">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" changeText='倒计时X秒' ref="uCode"
							@change="codeChange"></u-code>
						<text style="top:50%;left:50%;transform: translate(-50%,-50%);font-size:24rpx;position:absolute"
							:style="{'color':color}" @tap="getCode">{{tips}}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="text" style="margin-bottom:20rpx;">验证码</view>
				 
				<u-code-input v-model="verifyCode" :maxlength="6"></u-code-input>
			</view>
			<view style="width:100%;display: flex;justify-content: start;align-items: center;">
				<view>
					<u-checkbox-group :activeColor='color' v-model="checkboxValue" placement="column">
						<u-checkbox v-for="(item, index) in checkboxList" :key="index" :name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<text>阅读并同意</text>
				<text style="margin:0 10rpx;text-decoration: underline;" :style="{'color':color}"
					@click="toPath('userAgreement')">用户协议</text>
				<text>及</text>
				<text style="margin:0 10rpx;text-decoration: underline;" :style="{'color':color}"
					@click="toPath('privacy')">隐私协议</text>
			</view>
			<view style="width: 100%;height: 100rpx;"></view>
			<view style="padding: 0 50rpx;">
				<!-- <view style="width: 40%;">
					<u-button shape='circle' plain :color="color"  @click="toBack">返回</u-button>
				</view> -->
				<view>
					<u-button shape='circle' :color="color" @click='submit'>注册</u-button>
				</view>
			</view>
			
			
		</view>

	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				inviteId:0,
				load:0,
				show:false,
				account: '',
				infoStatus: 1,
				color: app.globalData.defaultColor,
				pwd: '',
				type: 'user',
				mobile: '',
				tips: '',
				verifyCode:'',
				verifyPwd:'',
				assignName:'',
				// refCode: null,
				seconds: 60,
				assignTaskId:null,
				company: '湖南方邦建筑有限公司',
				storeName: '长沙市雨花区零食很忙店',
				checkboxValue: [],
				// 基本案列数据
				checkboxList: [{
						name: '同意'
					},

				],
			}
		},
		onLoad(query) {
			const scene = decodeURIComponent(query.scene);
			console.log("query.scene:",scene)
			this.inviteId=scene.split('=')[1]
			console.log(this.inviteId,'this.inviteId')
			// this.inviteId=125864
			// this.getAssignNameByTaskId()
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			cancel(){
				uni.$u.toast('绑定失败:)');
				this.show=false
			},
			validatePass (){
				if(this.mobile.toString().length===0){
					uni.$u.toast('请输入电话号码')
					return false
				}else if(this.account.toString().length===0){
					uni.$u.toast('请输入账号')
					return false
				}else if(this.pwd.toString().length===0){
					uni.$u.toast('请输入密码')
					return false
				}else if( this.verifyPwd.toString().length===0){
					uni.$u.toast('请输入确认密码')
					return false
				}else if(this.verifyPwd.toString()!==this.pwd.toString()){
					uni.$u.toast('两次输入的密码不一致')
					return false
				}else if(this.verifyCode.toString().length===0){
					uni.$u.toast('请输入验证码')
					return false
				}else if(this.checkboxValue[0] !== '同意') {
					uni.$u.toast('请阅读并同意用户及隐私协议!');
					return false;
				}
				else{
					return true
				}
			},
			generateCode(){
				return uni.$u.http.get('/user/generateCode',{
					params:{
						phoneNumber:this.mobile
					}
				})
			},
			enrollAccount(){
				if(!this.validatePass()) return
				this.load=1
				uni.$u.http.post('/talent/registrationAccount',{
					userName:this.account,
					password:this.pwd,
					phoneNum:this.mobile,
					code:this.verifyCode,
					verifyPwd:this.pwd,
					inviteId:this.inviteId
				}).then(res=>{
					this.load=0
					if(res){
						uni.showModal({
							showCancel:false,
							title: '提示:',
							content: '注册成功，去登录?',
							success: (res) => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/login/index?path=pages/settled/index'
									})
								}
						
							}
						})
					}
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			next(){
				if(this.mobile.toString().length===0) {
					return uni.$u.toast('请输入电话号码')
				}
				uni.$u.http.get('/user/isEnrolled',{
					params:{
						phoneNumber:this.mobile
					}
				}).then(res=>{
					if(res){
						this.show=true
					}else{
						this.infoStatus = 2;
					}
				})
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if(this.mobile.toString().length===0) {
						return uni.$u.toast('请输入电话号码')
					}
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res= await this.generateCode()
					if(!res) {
						uni.$u.toast('手机号不正确');
						return
					}
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 60);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			
			toPath(){
				uni.navigateTo({
					url:'/pages/login/index'
				})
			},
			submit() {
				if(this.load==1){
					return uni.showLoading({
						title: '请勿重复提交 :)'
					});
				}
				this.enrollAccount()
				
			},
		}
	}
</script>
<style>
	page {
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	.bg {
		position: absolute;
		z-index: 1;
		width: 750rpx;
		height: 400rpx;
		top: 0;
		left: 0;
	}

	.content {
		position: absolute;
		z-index: 100;
		width: 660rpx;
		left: 45rpx;
		top: 200rpx;
	}

	.item {
		margin-bottom: 20rpx;
	}

	.text {
		font-size: 26rpx;
		color: #333;
	}

	.input {
		margin-top: 20rpx;
		background-color: #f6f6f6;
		padding: 10rpx;
		border-radius: 50rpx;
		overflow: hidden;
	}
</style>